<template>

      <ul class="check-list">
          <li v-for="(item,index) in checkList" :key="index" class="mr15 ib">
            <button  :class="{'active':item.active}"  @click="onCheckItem(item,index)" type="button"  class=" check-list-btn">{{item.value}}</button>
          </li>
      </ul>


</template>
<style lang="scss" scoped>

  .check-list{
      &>li{
        margin-right: 0;
        margin-left: 10px;
        .check-list-btn{
            background: #F5F5F5;
            color: #9B9B9B;
            font-size: 13px;
            text-align: center;
            padding: 6px 10px;
            border: 1px solid #CFCFCF;

          &.active{
            background: #42BD55;
            color: #fff;
            border: 1px solid #42BD55;
          }
        }
      }
  }

</style>
<script>
  import Util from "util";


    export default{

      props : {
        option : Array,
        value  : Number,
        type    : String
      },
      methods : {
        onCheckItem : function(item,index){
          if(!item.active){
             this.checkList = this.checkList.map((c)=>{
                if(c.key ==  item.key){
                  c.active  = true;
                  this.selectedVal = c.key;
                  this.$emit('input',this.selectedVal);
                  this.$emit("change",this.selectedVal);
                }
                else{
                  c.active  = false;
                }
                return c;
            });
          }
        },
        selectedItem : function(key){
          return this.option.map((c)=>{
              if(c.key ==  key){
                c.active = true;
              }
              return c;
          });
        }
      },

      mounted : function(){
        this.checkList = this.selectedItem(this.value);
      },

      computed : {

      },

        data(){
          return {
            checkList : [],
            selectedVal : this.value
          }
        },
        components:{

        }
    }
</script>
